<template>
  <a-modal
    v-model="visible"
    width="50vw"
    :bodyStyle="{ padding: '10px 20px'}"
    title="转规时长维护"
    :confirmLoading="loading"    
    @ok="handleOk"
    @cancel="handleCancel"
  >      
    <div>
      <a-form-model ref="ruleForm" :model="dataForm" :rules="rules" :label-col="{ span: 8 }" :wrapper-col="{ span: 15 }" :validateOnRuleChange="true">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="转规编号">
              <a-input v-model="dataForm.specNoStr" disabled placeholder="自动生成"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="是否关联品种" prop="relateFlag">
              <a-select
                placeholder="请选择"
                v-model="dataForm.relateFlag"
                @change="changeRelate"
                >
                <a-select-option :value="1" key="relateFlag1">是</a-select-option>
                <a-select-option :value="0" key="relateFlag0">否</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="上品种编码/名称" :rules="[{ required: dataForm.relateFlag==1, message: '请选择' }]">
              <a-select v-model="dataForm.topProd" placeholder="" show-search :filter-option="filterOption" allowClear
                :disabled="dataForm.relateFlag==0">
                <a-select-option v-for="(item, index) in dict.productList" :key="'topProd' + index" :value="item.id">
                  {{item.prodNo +'/' + item.prodName}}
                </a-select-option>
              </a-select>          
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="下品种编码/名称" :rules="[{ required: dataForm.relateFlag==1, message: '请选择' }]">
              <a-select v-model="dataForm.downProd" placeholder="" show-search :filter-option="filterOption" allowClear
                 :disabled="dataForm.relateFlag==0">
                <a-select-option v-for="(item, index) in dict.productList" :key="'downProd' + index" :value="item.id">
                  {{item.prodNo +'/' + item.prodName}}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="转规格时长(h)" prop="specDuration">
              <a-input-number v-model="dataForm.specDuration" :min="0" allowClear placeholder="请输入"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="转标签时长(h)" prop="labelDuration">
              <a-input-number v-model="dataForm.labelDuration" :min="0" allowClear placeholder="请输入"/>
            </a-form-model-item>
          </a-col>
        </a-row>        
      </a-form-model>      
    </div>
  </a-modal> 
</template>
<script>
import {getAction, postAction } from '@/api/manage'
import {codeInfoList} from '@/api/codeInfo'

export default {
  name: 'ChangeRuleAddModal',
  props: {
  },
  data() {
    return {
      visible: false,
      dataForm: {},
      rules: {
        relateFlag:[{ required: true, message: '请选择', trigger: 'change' }],
        specDuration: [{ required: true, message: '请输入', trigger: 'blur' }],
        labelDuration: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
      loading: false,
      modalType: 'add', // add新增  upd修改
      url: {
        save: '/hteWashSpec/save',  
        info: '/hteWashSpec/info/', // 初始查询
        productList: '/hteWashProduct/list',
      },      
      // 字典
      dict: {
        productList: [],
        turnWayOption:[{value:1,label:'不转规'},{value:2,label:'转规格'},{value:3,label:'转标签'}]
      },
      // 品种
      dataList: [],
      fetching: false,
    }
  },
  mounted() {
  },
  methods: {
    initDics(){
      // codeInfoList({type:'素材-订单类型',pageSize:-1,isdel: 0}).then((res) => {
      //   if (res.code == 200) {
      //     this.dict.orderTypeList = res.result.records
      //   } else {
      //     this.$message.warning('查询异常:' + res.message)
      //   }
      // });
      getAction(this.url.productList).then((res) => {
        if (res.success) {
          this.dict.productList = res.result
        }else {
          this.$message.warning(res.message)
        }
      })
    },
    showVisible(id) {      
      if(id){        
        this.modalType = 'upd'
        this.$set(this.dataForm, 'orderNo', id)
        this.initData(id) // 修改        
      } else{
        this.modalType = 'add'
      }   
      this.initDics() // 查询字典
      this.visible = true            
    },
    handleCancel() {
      this.visible = false
      this.dataForm = {}
      this.fileData = []
      this.$refs.ruleForm.resetFields()
    },
    handleOk(){
    
      const that = this;
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) { 
          if(that.dataForm.relateFlag == 1 && !that.dataForm.topProd){
            this.$message.error('请选择上品种')
            return false;
          }
          if(that.dataForm.relateFlag == 1 && !that.dataForm.downProd){
            this.$message.error('请选择下品种')
            return false;
          }

          this.loading = true           
          postAction(this.url.save, this.dataForm).then(res => {
            if (res.success) {
              this.$emit('ok')
              this.handleCancel()
              this.$message.success(`${this.modalType == 'add' ? '新增成功' : '修改成功'}`)
            } else {
              this.$message.error(res.message)
            }
          })
          this.loading = false                                 
        }        
      })
    },
    initData(id){
      this.loading = true
      getAction(this.url.info + id).then(res => {
        if (res.success) {
          this.dataForm = res.result
        } else {
          this.$message.error('查询失败:' + res.message)
        }
        this.loading = false
      })
    },
    /**
     * 品种查找 
     */
    fetchUser(val) {
      if (val) {
        this.dataList = []
        this.fetching = true
        getAction(this.url.getUserList, { name: val }).then((res) => {
          if (res.success) {
            this.dataList = res.result
            this.fetching = false
          }
        })
      }
    },
    handleSubChange(value, option, targe) {      
      let name = option.componentOptions.children[0].text ? option.componentOptions.children[0].text.trim() : ''      
      this.$set(this.dataForm, targe, value)
    },
    filterOption (input, option){
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    },
    changeRelate(val){
      if(val == 0){
        this.dataForm.topProd=undefined;
        this.dataForm.downProd=undefined;
      }
      this.$refs.ruleForm.clearValidate();
    }
  },
}
</script>
<style lang="less" scoped>
  /deep/ .ant-input-number,
  /deep/ .ant-select {
    width:100%;
  }
</style>
